/*
 * 产品信息修改
 * @Author: ljb 
 * @Date: 2017-11-27 15:24:41 
 * @Last Modified by: ljb
 * @Last Modified time: 2018-02-25 18:45:43
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .ivu-form-item-content {
        img {
            width: 150px;
        }
    }

    .delete-information {
        margin-left: 10px;
    }

</style>
<template>
<Form ref="formValidate" :model="formValidate" :label-width="80">

    <!-- <Form-item label="产品名称" prop="name">
        <Input type="text" v-model="formValidate.name" placeholder="请输入名称"></Input>
    </Form-item> -->

    <Form-item label="产品分类" prop="product_category_id">
        <Select v-model="formValidate.product_category_id" clearable filterable>
            <OptionGroup v-for="category in categories" :key="category.id" :label="category.name">
                <Option v-for="sub_category in category.get_sub_categories" :value="sub_category.id + ''" :key="sub_category.id">{{ sub_category.name }}</Option>
            </OptionGroup>
        </Select>
    </Form-item>

    <Form-item label="主标题" prop="title">
        <Input type="text" v-model="formValidate.title" placeholder="请输入产品主标题"></Input>
    </Form-item>

    <!-- <Form-item label="副标题" prop="sub_title">
        <Input type="text" v-model="formValidate.sub_title" placeholder="请输入产品副标题"></Input>
    </Form-item> -->

    <Form-item label="产品型号" prop="model_number">
        <Input type="text" v-model="formValidate.model_number" placeholder="请输入产品型号"></Input>
    </Form-item>

    <Form-item label="关键字" prop="keywords ">
        <Input type="text" v-model="formValidate.keywords " placeholder="请输入产品关键字"></Input>
    </Form-item>

        <Form-item label="描述" prop="description">
        <Input type="textarea" v-model="formValidate.description" placeholder="请输入产品描述"></Input>
    </Form-item>

    <Form-item label="产品优先级" prop="sort">
        <InputNumber :max="100" :min="1" v-model="formValidate.sort" placeholder="请输入产品优先级"></InputNumber>
    </Form-item>

    <Form-item label="封面图" prop="thumb">
        <Upload :before-upload="file=>fileChange(file,'thumb','image_info')"
                :on-remove="file=>fileChange(file,'thumb','image_info')"
                :multiple="false"
                accept="image/jpg, image/jpeg, image/png"
                action="//fake_upload_url/">
            <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
            <div class="license-tip" slot="tip" v-if="image_info.name">{{ image_info.name }}</div>
        </Upload>
        <img v-if="image_info.url" :src="image_info.url" alt="封面图">
    </Form-item>

    <Form-item label="产品资料" prop="information">
        <Upload :before-upload="file=>fileChange(file,'information','file_info')"
                :on-remove="file=>fileChange(file,'information','file_info')"
                :multiple="false"
                accept="image/jpg, image/jpeg, image/png"
                action="//fake_upload_url/">
            <Button type="ghost" icon="ios-cloud-upload-outline">上传资料</Button>
            <div class="license-tip" slot="tip" v-if="file_info.name">{{ file_info.name }}<Button type="error" size="small" icon="trash-a" class="delete-information" @click="$emit('delete')"></Button></div>
        </Upload>
    </Form-item>

    <Form-item label="产品规格" prop="specification">

        <vueEditor  :preview-width="886"
                    :pre-data="editor_s_pre_data"
                    :ueditor-config="ue_config"
                    @change="getSpecificationContent"></vueEditor>
        <!-- <vue-editor ref="editor_s"
                    :preview-width="886"
                    :class-name="class_name_2"
                    :request-url="request_url"
                    :open-upload-img="true"
                    :pre-data="editor_s_pre_data"
                    @change="getSpecificationContent"></vue-editor> -->
    </Form-item>

    <Form-item label="产品详情" prop="detail">

        <vueEditor  :preview-width="886"
                    :pre-data="editor_pre_data"
                    :ueditor-config="ue_config"
                    @change="getDetailContent"></vueEditor>
        <!-- <vue-editor ref="editor"
                    :preview-width="886"
                    :class-name="class_name"
                    :request-url="request_url"
                    :open-upload-img="true"
                    :pre-data="editor_pre_data"
                    @change="getDetailContent"></vue-editor> -->
    </Form-item>

    <Form-item>
        <Button type="primary" @click="updateProduct">更新</Button>
    </Form-item>

</Form>
</template>

<script>

import API_LIST from 'src/API_LIST';

import vueEditor from 'src/views/component/vue-ueditor';
// import vueEditor from 'src/views/component/vueEditor';

export default {
    name: 'product-edit',
    props: ['productDetail','categories'],
    data() {	
        return {

            ue_config : {
                initialFrameWidth : 650,
                enableAutoSave : false
            },

            // class_name : 'editor-edit',

            // class_name_2 : 'editor-edit2',

            // request_url : API_LIST.MULTI_UPLOAD_IMG,

            formValidate : {

                // name : '',

                product_category_id : '',

                title : '',

                // sub_title : '',

                model_number : '',

                specification : '',

                thumb: '',

                detail: '',

                information : '',

                sort: 1,

                keywords: '',

                description: '',

            },                  //编辑信息时的表单

            editor_pre_data : '',       //产品详情富文本编辑器的预设值

            editor_s_pre_data : '',       //产品规格富文本编辑器的预设值

            file_info : {
                name: '',
                url: ''
            },

            // 上传的图片信息
            image_info : {
                name: '',
                url: ''         //这个地方可以 base64 编码的图片，然后给 modal 框去显示图片
            }

        }
    },
    components: {
        vueEditor
    },
    watch: {
        'productDetail' : function(){

            if( this.productDetail ) {

                // this.formValidate.name = this.productDetail.name;
                this.formValidate.product_category_id = String(this.productDetail.product_category_id);
                this.formValidate.title = this.productDetail.title;
                // this.formValidate.sub_title = this.productDetail.sub_title;
                this.formValidate.model_number = this.productDetail.model_number;

                this.formValidate.detail = this.productDetail.detail;
                this.formValidate.specification = this.productDetail.specification;
                this.formValidate.sort = this.productDetail.sort;
                this.formValidate.thumb = this.productDetail.thumb;
                this.formValidate.information = this.productDetail.information;

                this.editor_pre_data = this.productDetail.detail;
                this.editor_s_pre_data = this.productDetail.specification;

                this.image_info.url = this.productDetail.thumb;
                this.file_info.name = this.formatFileName(this.productDetail.information);

                this.formValidate.keywords = this.productDetail.keywords || '';
                this.formValidate.description = this.productDetail.description || '';

            }

        }  
    },
    methods: {
        
        /**
         * 清楚资料信息
         * @return {undefined}
         */
        clearInformation(){

            this.file_info.name = '';

        },

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            this[info].name = file.name;

            this[info].url = '';

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 格式化名字
         * @param  {string} name {完整的名称}
         * @return {string} {格式化后的名称}
         */
        formatFileName(name){

            if( !name )return;

            return name.split('/').pop();

        },

        /**
         * 富文本内容改变时触发的回调
         * @param  {string} content {产品规格的内容}
         * @return {undefined}
         */
        getSpecificationContent(content){

            this.formValidate.specification = content;

        },

        /**
         * 富文本内容改变时触发的回调
         * @param  {string} content {产品详情的内容}
         * @return {undefined}
         */
        getDetailContent(content){

            this.formValidate.detail = content;

        },

        /**
         * 重置合作伙伴信息
         * @return {undefined}
         */
        resetProductInfo(){

            this.image_info.name = '';

            this.image_info.url = '';

        },

        /**
         * 更新合作伙伴信息
         * @return {undefined}
         */
        updateProduct(){
            
            // this.resetProductInfo();

            this.$emit('update',this.productDetail.id,this.formDataCreate());

        },

        /**
         * 手动拼接formdata数据
         * @return {Object}
         */
        formDataCreate(){

            const new_object = {

                _method : 'PUT',

                // name : this.formValidate.name,

                product_category_id : this.formValidate.product_category_id,

                title : this.formValidate.title,

                // sub_title : this.formValidate.sub_title,

                model_number : this.formValidate.model_number,

                thumb: this.formValidate.thumb,

                information: this.formValidate.information,

                detail: this.formValidate.detail,

                specification: this.formValidate.specification,

                sort: this.formValidate.sort,

                keywords: this.formValidate.keywords,
                
                description: this.formValidate.description,

            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                if( !new_object[key] )return;

                form_data.append( key , new_object[key] );
        
            });

            return form_data;

        }
        
    }
}
</script>